<template>
	<div class="diyWrap" :class="['no-margin',hasMargin==1?'magrin':'']" :style="{background:background}">
    <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
      <diy-tpl :tplData="module"></diy-tpl>
    </van-list>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
  import { getModule } from '@/api/shop/index'
  import diyTpl from '@/components/diyTpl/index'
  import { mpShare } from '@/utils/utils'
  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
  import small from '@/smallapp/small'
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
      diyTpl,
      SmallLogin
    },
    data() {
      return {
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        diyModule_id: null,
        module: [],
        background: 'white',
        hasMargin: 0,
        firstLoading: true,
        loading: false,
        finished: false,
        error: false,
        p: 2
      }
    },
    created() {
        window.addEventListener('wxload', query => {
          this.diyModule_id = this.$route.query.id ? this.$route.query.id : query.id
          this.init()
          small.HandleShareParams()
        })
        window.addEventListener('wxshow', () => {
          if (!small.checkLogin()) {
            this.$refs.smalllogin.openSmallLoginPop()
          }
        })
    },
    methods: {
      init() {
        getModule({ id: this.diyModule_id }).then(res => {
          if (res.status == 1) {
            this.firstLoading = false
              wx.setNavigationBarTitle({
                title: res.data.page_title
              })
            this.background = res.data.backgroundColor
            this.module = res.data._diyHtml
            this.hasMargin = res.data.hasMargin
            if (this.module.length < 10) {
              this.finished = true
            }
              // TODO 小程序分享
              this.shareInfo = {
                title: res.data.jsapi_title || '',
                imgUrl: res.data.jsapi_img || '', // 分享图标
                shareParam: res.data.jsapi_url ? res.data.jsapi_url.split('?')[1] : `id=${this.diyModule_id}&sid=${small.globalData.shopId}&pid=${small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'}`
              }
              mpShare (true, true, '/goods/pages/module/index', this.shareInfo)
            // TODO小程序如果第一页加载没有满屏 则继续加载
              if (!this.finished) {
                this.$nextTick(() => {
                  document.querySelector('.diyWrap').$$getBoundingClientRect().then(res=>{
                    if (res.height*1 < this.height*1) {
                      this.onLoad()
                    }
                  })
                })
              }
          }
        })
      },
      // 首页装修组件加载更多
      onLoad() {
        if (this.firstLoading) {
          this.loading = false
          return
        }
        const data = {
          p: this.p,
          id: this.diyModule_id
        }
        getModule(data).then(res => {
          if (res.status == 1) {
            this.loading = false
            const data = res.data
            this.module = this.module.concat(data._diyHtml)
            this.p++
            if (data._diyHtml.length < 10) {
              this.finished = true
            }
          }
        }).catch(() => {
          this.error = true
        })
      }
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
    }
  })
</script>

<style lang="scss">
.no-margin{
  &.magrin{
    padding: 0 20px;
  }
}
</style>
